<template>
	<view id="login-page">
		<view class="login-body">
			<view class="login-page-title">{{GLOBAL.SYSTEM_TITLE}}</view>
			<view class="phone-login-box" v-if="openPhoneLogin">
				<view class="login-box">
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-user"></view>
						<input class="login-input" type="text" v-model="phone"  placeholder="请输入手机号">
					</view>
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-password"></view>
						<input class="login-input" type="password" v-model="password"  placeholder="请输入密码">
					</view>
					<!-- <view class="login-input-wrapper">
						<view class="icon el-icon-ali-number-code"></view>
						<input class="login-input" type="text" v-model="captcha" placeholder="请输入数字验证码">
						<image @tap="getImgCode" class="login-input-image-code" :src="imgCode"></image>
					</view> -->
					<!-- <view class="login-input-wrapper">
						<view class="icon el-icon-ali-number-code"></view>
						<view class="graph-code">
							<validate class="validate"  @success="setValidate"></validate>
						</view>
					</view> -->
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-sms-code"></view>
						<input class="login-input" type="text" v-model="phoneCode" placeholder="请输入短信验证码">
						<view @tap="getMsgVaildCode" class="login-get-vaild-code">{{vaildCodeText}}
						    <text v-if="vaildCodeText!=='获取验证码'">s</text>
						</view>
					</view>
				</view>
				<button class="confirm-btn" @click="toLogin" :loading="logining" :disabled="logining">登录</button>
        <!--   #ifdef H5   -->
				<view class="other-opt-obx">
					<view class="other-opt-title" @click="toFindPasswordPage">
						忘记密码？
					</view>
					<view class="other-opt-title" @click="toRegPage">
						立即注册
					</view>
				</view>
        <!--   #endif   -->
        <!--   #ifdef APP-PLUS   -->
        <view class="other-opt-obx app">
          <view class="other-opt-title" @click="toFindPasswordPage">
            忘记密码？
          </view>
        </view>
        <!--   #endif   -->
			</view>
      <!--   #ifdef H5   -->
			<view class="wechat-login-box" v-if="openWeChatLogin">
				<view class="segmentation-line" v-if="openPhoneLogin">
					<text class="line"></text>
					<text class="title">其他方式登录</text>
					<text class="line"></text>
				</view>
				<view class="wechat-icon-box" @click="loginByWechat">
					<image class="wechat-icon" src="../../static/img/wx_login.png" mode=""></image>
				</view>
			</view>
      <!--   #endif   -->
		</view>
	</view>
</template>

<script>
	import {
	    mapMutations
	} from 'vuex';
	import {
		apiPhoneLogin,
		apiWechatLogin,
		apiLoginType,
		apiSendSms
	} from '../../../http/apis.js'
	import Validate from '../../components/graphVerification.vue'
	export default{
		components:{
			Validate
		},
		data(){
			return {
				phone: '',//18812341234
				password: '',//qwe123
				phoneCode: '',
				captcha: '',
				logining: false,
				imgCode: '',
				vaildCodeText: '获取验证码',
				uuid: '',
				code: '',
				loginUrlParam: '',
				openPhoneLogin: false,
				openWeChatLogin: false,
				// validateCode: ''
			}
		},
		onLoad(options){
			this.code = !!options.code ? options.code : ''
			this.loginUrlParam = !!options.t ? options.t : ''
			this.phone = uni.getStorageSync('phone') ? uni.getStorageSync('phone') : ''
			this.password = uni.getStorageSync('password') ? uni.getStorageSync('password') : ''
			if(options.token){
				this.login(options.token)
			}
			if(uni.getStorageSync('token')){
				uni.switchTab({
				    url: '../home/home'
				});
			}
		},
		onShow() {
			apiLoginType({
			    t: this.loginUrlParam
			}).then(res =>{
			    if(res.data.code == 1)  {
					this.openPhoneLogin = res.data.msg == 1 ? true : false
					this.openWeChatLogin = res.data.weChatStatus == 1 ? true : false
				}
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
			//app的时候用
			this.getMobilePlatformType()
		},
		methods: {
			...mapMutations(['login']),
			// setValidate(resp){
			// 	this.validateCode = resp
			// },
			// resetValidate() {
			//     this.validateCode = "";
			//     LUOCAPTCHA && LUOCAPTCHA.reset();
			// },
			getMsgVaildCode(){
				if (!this.isPhoneNumRight()) {
				    return
				}
				// if (!this.validateCode) {
				// 	this.$msg.showToast('请先点击上方的验证')
				// 	return
				// }

				if (this.vaildCodeText !== '获取验证码') {
				    return
				}
				apiSendSms({
				    phone: this.phone,
				    codeType: 'pushLogin',
				    // captcha: this.validateCode
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.$msg.showToast(res.data.msg)
						this.vaildCodeText = 60
						let timer = setInterval(() => {
						    this.vaildCodeText = (this.vaildCodeText - 1)
						    if (this.vaildCodeText == 0) {
						        this.vaildCodeText = '获取验证码'
						        clearInterval(timer)
						    }
						}, 1000)
					} else {
						this.$msg.showToast(res.data.msg)
						// this.resetValidate()
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			toFindPasswordPage(){
				this.phone = this.phone ? this.phone : ''
				uni.navigateTo({
				    url: '../findPassword/findPassword?phone=' + this.phone,
				})
			},
			toRegPage(){
				uni.navigateTo({
				    url: '../reg/reg',
				})
			},
			//校验短信验证码
			isMsgCodeRight() {
			    if (!this.phoneCode) {
					this.$msg.showToast('请输入短信验证码')
			        return false
			    }
			    if (this.phoneCode.length < 4) {
					this.$msg.showToast('验证码最短为 4 个字符')
			        return false
			    }
			    return true
			},
			async toLogin(){
				if (!this.isPhoneNumRight()) {
				    return
				}
				if (!this.password) {
					this.$msg.showToast('密码不能为空')
				    return false
				}
				if (!this.isMsgCodeRight()) {
				    return
				}

				this.$msg.showLoading('登录中')
				this.logining = true;

				apiPhoneLogin({
				    phone: this.phone,
				    password: this.password,
					phoneCode: this.phoneCode,
				}).then(res =>{
					uni.hideLoading()

				    if(res.data.code == 1)  {
						this.login(res.data.token);
						uni.setStorageSync('phone', this.phone);
						uni.setStorageSync('password', this.password);
						uni.setStorageSync('showNoticeModal', 1);
						this.$msg.showToast('登录成功')
						setTimeout(()=>{
							this.logining = false;
							uni.switchTab({
							    url: '../home/home'
							});
						},500)
					} else if(res.data.code == -1){
						this.logining = false;
						this.$msg.showToast(res.data.msg)
						return
					} else {
						this.$msg.showToast(res.data.msg)
						this.login(res.data.token);
						setTimeout(()=>{
							this.logining = false;
							uni.navigateTo({//正在审核中
								url: '../bindInfo/bindTbAccountxl?type=init'
							})
						},1000)
					}
				}).catch(res => {
					uni.hideLoading()
					this.$msg.showToast(res.data.msg)
					this.logining = false;
				})
			},
			loginByWechat(){
        // #ifdef H5
				if(this.isWechat()){
					apiWechatLogin({}).then(res =>{
            if (res.data.code == 1) {
              let appid = res.data.msg
              // 没有前置机时
              // let link = this.GLOBAL.MAIN_URL + 'pages/wxAuth/wxAuth'
              // 有前置机时
              let link = this.GLOBAL.WX_CALLBACK + 'baseapi/pushBase/weChatUserInfo'
              let uri = encodeURIComponent(link);
              let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
              window.location.href = authURL
						}
					}).catch(res => {
						this.$msg.showToast(res.data.msg)
					})
				} else {
					this.$msg.showToast('请到微信上打开平台')
				}
        // #endif
			},
			//校验手机号码
			isPhoneNumRight() {
			    let reg = /^(14[0-9]|13[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$$/;
			    if (!this.phone) {
					this.$msg.showToast('手机号不能为空')
			        return false
			    }
			    if (!reg.test(this.phone)) {
					this.$msg.showToast('请输入正确的手机号')
			        this.phone = ''
			        return false
			    }
			    return true
			},
			getMobilePlatformType(){
				try{
					let webview = plus.webview.currentWebview()
					uni.setStorageSync('mobilePlatformType', webview.mobilePlatformType);
				}catch(e){
					uni.setStorageSync('mobilePlatformType', 'H5');
				}
			},
			isWechat () {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
		},

	}
</script>

<style lang="scss">
	#login-page {
		height: 100vh;
		overflow-y: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		.login-page-title {
			// padding-top: 248upx;
			text-align: center;
			font-size: 70upx;
			font-family: MFLiHei_Noncommercial-Regular,MFLiHei_Noncommercial;
			font-weight: 400;
			color: $theme-color;
			line-height: 86upx;
		}
		.login-box {
			margin-top: 40upx;
			padding: 0 80upx;
			.login-input-wrapper {
				border-bottom: 1px solid #E8E8E8;
				margin-top: 40upx;
				position: relative;
				display: flex;
				align-items: center;
				padding-bottom: 16upx;
				.icon {
					font-size: 38upx;
					display: inline-block;
					vertical-align: super;
					color: #CFCFCF;
				}
				.login-input {
					display: inline-block;
					margin-left: 20upx;
					font-size: 30upx;
					width: 85%;
					padding: 8upx 0;
					.uni-input-placeholder {
						color:rgba(153,153,153,1);
					}
				}
				.graph-code {
					flex: 1;
					margin-left: 20upx;
				}
				.login-input-image-code {
					width: 180upx;
					height: 80upx;
					position: absolute;
					right: 0;
					top: -20upx;
				}
				.login-get-vaild-code {
					width: 180upx;
					height: 60upx;
					position: absolute;
					right: 0;
					top: -10upx;
					border-radius:6upx;
					background: $theme-background-color;
					font-size: 24upx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(255,255,255,1);
					line-height: 60upx;
					text-align: center;
				}

			}
		}
		.confirm-btn{
			height: 96upx;
			line-height: 96upx;
			border-radius: 10upx;
			background: $theme-background-color;
			font-size: $font-lg;
			margin: 40upx 80upx 0 80upx;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
		.other-opt-obx {
			display: flex;
			justify-content:space-between;
			margin: 0 80upx;

      &.app {
        justify-content: flex-end;
      }

			.other-opt-title {
				font-size: 28upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:$theme-color;
				line-height: 24upx;
				margin-top: 40upx;
			}
		}

		.wechat-login-box {
			margin-top: 30upx;
			.segmentation-line {
				text-align: center;
				.line{
					width: 184upx;
					height: 2upx;
					background: #E8E8E8;
					display: inline-block;
					vertical-align: middle;
				}
				.title {
					font-size: 28upx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:$theme-color;
					line-height: 24px;
				}
			}
			.wechat-icon-box {
				text-align: center;
				.wechat-icon {
					margin: 56upx 0;
					width: 100upx;
					height: 100upx;
				}
			}
		}
	}
</style>
